<template>
  <div v-show="props.isShow" class="overlay">
    <div class="panel gap-col-16">
      <div class="head">
        <div class="item prepend">
          <slot name="prepend-icon"></slot>
        </div>
        <div class="item title">
          <slot name="title"></slot>
        </div>
        <div class="item append">
          <slot name="append-icon"></slot>
        </div>
      </div>
      <div class="body">
        <slot name="body"></slot>
      </div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  isShow: {
    type: Boolean,
    required: false,
  },
})
</script>
<style scoped lang="scss">
.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;

  .panel {
    padding: 1rem;
    width: 100%;
    height: 37.4375rem;
    max-height: 90%;

    position: absolute;
    bottom: 0;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    border-radius: 1.25rem 1.25rem 0rem 0rem;
    background: var(--bg-blue, #181925);

    .head {
      display: flex;
      justify-content: space-between;
      align-content: center;
      flex-direction: row;
      width: 100%;
      height: 2.5rem;

      position: relative;

      padding-bottom: 0.5rem;
      border-bottom: 0.5px solid var(--color-primary-divider, rgba(215, 215, 215, 0.4));

      .title {
        text-align: center;
        flex: 2;
      }
      .prepend {
        text-align: left;
        flex: 1;
      }
      .append {
        text-align: right;
        flex: 1;
      }
    }
    .body {
      width: 100%;
      height: 100%;
      overflow-x: hidden;
      margin-bottom: 4rem;
    }
  }
}
</style>
